﻿@page "/Article/{Se}/{Name?}"
@using Markdig.Syntax
@using Markdig.Syntax.Inlines
@using Markdig

<PageTitle>@(string.IsNullOrEmpty(Name) ? $"序列 {Se}" : Name.Replace("-", " "))</PageTitle>

<GridRow>
    <GridCol Md="6" Lg="6" Xl="5" Xxl="5"
             class="desktop-phone" style="overflow: auto;width:200px;">
        <Menu Theme="MenuTheme.Light"
              Mode="MenuMode.Inline" Class="menu-block">
            <MenuItemGroup Class="group-block">
                <TitleTemplate>
                    <div class="group-title">
                        @Se
                    </div>
                </TitleTemplate>
                <ChildContent>
                    <MenuItem RouterLink="@($"/Article/{Se}")"
                              RouterMatch="NavLinkMatch.All">
                        开始
                    </MenuItem>
                    @for (var i = 1; i <= List.Length; i++)
                    {
                        var i1 = i;
                        <MenuItem RouterLink="@($"/Article/{Se}/{List[i - 1]}")"
                                  RouterMatch="NavLinkMatch.All">
                            @List[i1 - 1]
                        </MenuItem>
                    }
                </ChildContent>
            </MenuItemGroup>
        </Menu>
    </GridCol>
    <GridCol Xs="24" Sm="24" Md="18" Lg="18" Xl="19" Xxl="19"
             Style="padding: 20px;min-height: 100vh;">
        @if (!string.IsNullOrEmpty(Name))
        {
            <MarkdownRenderer html="@Content"/>
        }
        else
        {
            <Title Level="2">@Se</Title>
            <GridRow Class="block" Gutter="(20, 24)">
                @for (var i = 1; i <= List.Length; i++)
                {
                    var i1 = i;
                    <GridCol Xs="24" Sm="24" Md="12" Lg="12" Xl="12" Xxl="12">
                        <a href="@($"/Article/{Se}/{List[i1 - 1]}")">
                            <Card Hoverable Class="card" Bordered="false">
                                <h1 style="margin-top: 10px;margin-bottom: 10px;">@List[i1 - 1]</h1>
                            </Card>
                        </a>
                    </GridCol>
                }
            </GridRow>
        }
        <BackTop Style="margin-bottom:60px">
            <div class="ant-back-top-inner">
                <Icon Type="arrow-up" Theme="outline"/>
            </div>
        </BackTop>
    </GridCol>
</GridRow>

@code
{
    [Parameter] public string? Name { get; set; }
    [Parameter] public string? Se { get; set; }
    private string Content { get; set; } = "";

    private string[] List { get; set; } = [];

    protected override async Task OnParametersSetAsync()
    {
        if (string.IsNullOrEmpty(Se)) return;

        var dir = new DirectoryInfo($"wwwroot/Docs/{Se}");
        if(!dir.Exists)return;

        List = dir.GetFiles().Select(x => x.Name.Replace(".md", "")).ToArray();
        if (string.IsNullOrEmpty(Name)) return;
        var info = new FileInfo($"wwwroot/Docs/{Se}/{Name}.md");
        if (!info.Exists) return;

        var pipeline = new MarkdownPipelineBuilder()
            .UseAdvancedExtensions()
            .UseBootstrap()
            .UseEmojiAndSmiley()
            .UseSmartyPants()
            .UseSoftlineBreakAsHardlineBreak()
            .Build();
        var content = await File.ReadAllTextAsync(info.FullName);

        var document = Markdown.Parse(content, pipeline);
        foreach (var node in document)
        {
            if (node is not ParagraphBlock { Inline: not null } paragraphBlock) continue;
            foreach (var inline in paragraphBlock.Inline)
            {
                if (inline is not LinkInline { IsImage: true } linkInline) continue;
                if (!linkInline.Url!.StartsWith("http"))
                    linkInline.Url = $"Docs/{Se}/{linkInline.Url}";
            }
        }
        
        Content = document.ToHtml();
    }
}

<style>
    h1, h2, h3, h4, h5, h6 {
        font-weight: bold;
        font-size: x-large;
    }

    .footer{
        display: none;
    }

    @@media screen and (max-width: 768px) {
        .footer {
            display: block !important;
        }
    }
</style>